<template>
    <el-dialog 
        class="re-dialog" 
        :close-on-click-modal="false" 
        title="制证" 
        :visible="dialogVisible" 
        v-if = "dialogVisible"
        @close="close" width="1050px">
        <el-row class="row">
            <el-col :span="12">
                <label class="el-label" for="">证件持有者：</label>
                <span>{{record.applyPersonName}}</span>
            </el-col>
            <el-col :span="12">
                <label class="el-label" for="">联系人：</label>
                <span>{{record.handlePersonName}}</span>
            </el-col>
        </el-row>
        <el-row class="row">
            <el-col :span="12">
                <label class="el-label" for="">联系电话：</label>
                <span>{{record.handlePersonTelNo}}</span>
            </el-col>
        </el-row>
        <el-form :model="ruleForm" :rules="rules" ref="licRuleForm">
            <el-row class="row">
                <el-col :span="12">
                    <el-form-item prop="type" :label-width="formLabelWidth"  label="证件类型：">
                        <el-select class="w-100" v-model="ruleForm.type" placeholder="请选择证件类型">
                            <el-option v-for="(item,index) in typeList" :key="index" v-bind:label="item.dictDataName" v-bind:value="item.dictDataCode"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="credentialNum" :label-width="formLabelWidth" label="证件号码：">
                        <el-input maxlength="50" placeholder="请输入证件号码" v-model="ruleForm.credentialNum"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col :span="12">
                    <el-form-item :label-width="formLabelWidth" required label="证件有效期：">
                        <div class="flex">
                            <el-form-item prop="startTime">
                                <el-date-picker placeholder="开始日期" v-model="ruleForm.startTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 145px;"></el-date-picker>
                            </el-form-item>
                            <span style="margin:0 13px;">至</span>
                            <el-form-item prop="endTime">
                                <el-date-picker placeholder="结束日期" v-model="ruleForm.endTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 145px;"></el-date-picker>
                            </el-form-item>

                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label-width="formLabelWidth" prop="fileId" required label="证件附件：">
                        <Upload  :defaultUrl = "defaultUrl" v-on:onSuccess="onUploadSuccess" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div> -->
        <span slot="footer" class="dialog-footer">
            <button class="footer-btn cancel" @click="close">取 消</button>
            <button @click="submitForm('ruleForm')" class="footer-btn sure">确定</button>
        </span>
    </el-dialog>
</template>

<script>
import { makeCard, findByDictCode } from "../../config/api.js";
import Upload from "../common/upload.vue";

export default {
    name: "licensingDialog",
    components: {
        Upload
    },
    data() {
        let validStartTime = (rule, value, callback) => {
            let { endTime } = this.ruleForm;
            if (value && !endTime) {
                this.$refs.licRuleForm.validateField(["endTime"]);
                callback();
            } else if (!value) {
                callback(new Error("请选择开始日期"));
            } else if (getTime(value) > getTime(endTime)) {
                this.$refs.licRuleForm.clearValidate(["startTime"]);
                callback(new Error("开始日期不能大于结束日期"));
            } else {
                this.$refs.licRuleForm.validateField(["endTime"]);
                callback();
            }
        };
        let validEndTime = (rule, value, callback) => {
            let { startTime } = this.ruleForm;
            if (value && !startTime) {
                this.$refs.licRuleForm.validateField(["startTime"]);
                callback();
            } 
            // else if (!value) {
            //     callback(new Error("请选择结束日期"));
            // } 
            else if (value && getTime(value) < getTime(startTime)) {
                this.$refs.licRuleForm.clearValidate(["endTime"]);
                callback(new Error("结束日期不能小于开始日期"));
            } else {
                callback();
            }
        };
        let validFileId = (rule,value,callback)=>{
            if(!value){
                callback(new Error("请上传证件附件"))
            }else{
                callback();
            }
        }
        let getTime = tamp => {
            return new Date(tamp).getTime();
        };
        return {
            formLabelWidth: "170px",
            defaultUrl:"",//上传附件地址

            typeList: [], //证件列表
            ruleForm: {
                applyPersonName: "",
                handlePersonName: "",
                handlePersonTelNo: "",
                type: "",
                credentialNum: "",
                startTime: "",
                endTime: "",
                fileId: "",
            },
            rules: {
                type: [
                    {
                        required: true,
                        trigger: "change",
                        message: "请选择证件类型"
                    }
                ],
                credentialNum: [
                    {
                        required: true,
                        trigger: "change",
                        message: "请输入证件号码"
                    }
                ],
                startTime: [
                    {
                        required: true,
                        trigger: "change",
                        validator: validStartTime
                    }
                ],
                endTime: [
                    {
                        required: true,
                        trigger: "change",
                        validator: validEndTime
                    }
                ],
                fileId: [
                    {
                        required: true,
                        trigger: "change",
                        validator: validFileId
                    }
                ]
            }
        };
    },
    props: {
        record: Object, //数据
        dialogVisible: {
            type: Boolean,
            default: false
        }, //窗口显示/关闭
        onClose: Function, //关闭弹窗的回调
    },
    created() {
        this.getCardType("cardType");
    },
    methods: {
        getCardType(type) {
            //获取办证类型
            findByDictCode({ dictCode: type }).then((result = {}) => {
                let data = result.data || [];
                this.typeList = data;
            });
        },
        close(e) {
            this.$emit("onClose");
        },
        /**
         * 上传成功回调
         */
        onUploadSuccess(e) {
            this.ruleForm.fileId = e.fileId;
            this.defaultUrl = e.uploadPath;
            console.log(this.ruleForm)
            setTimeout(()=>{
                this.$refs.licRuleForm.clearValidate(["fileId"]);
            },10)
        },
        submitForm(formName) {
            this.$refs.licRuleForm.validate((valid, values) => {
                if(this.ruleForm.fileId){
                    this.$refs.licRuleForm.clearValidate(["fileId"]);
                }
                if (valid) {
                    let {
                        handlePersonName,
                        applyPersonName,
                        applyPersonCardType,
                        applyPersonCardNum,
                        handlePersonTelNo,
                        id
                    } = this.record;
                    let { startTime, endTime,type,credentialNum,fileId,remark } = this.ruleForm;
                    let request = {
                        id,
                        owner: applyPersonName,
                        contacts: handlePersonName,
                        telNo: handlePersonTelNo,
                        type,
                        credentialNum,
                        startTime,
                        fileId,
                        endTime
                    };
                    console.log(request);
                    makeCard(request).then(
                        (res = {}) => {
                            this.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            this.$emit("callBack"); //getList
                        }
                    );
                } else {
                    return false;
                }
            });
        }
    },
    watch: {
        dialogVisible: function(val, oldVal) {
            if (val) {
                console.log(val)
                this.ruleForm = {};
                this.ruleForm.type = this.record.cardTypeCode
                this.defaultUrl = "";
                setTimeout(()=>{
                    this.$refs.licRuleForm.clearValidate();
                },0)
            }
        },
        record:function(val = {}){
            // if(val.cardTypeCode){

            // }
            // this.ruleForm.type = val.cardTypeCode || undefined;
            // console.log(val,"vvv")
        }
    }
};
</script>
<style lang="scss" scoped>
.row {
    margin-bottom: 15px;
    font-size: 12px;
}
.el-label {
    display: inline-block;
    width: 170px;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
}
.w-100 {
    width: 100%;
}
.footer-btn {
    width: 66px;
    height: 32px;
    border-radius: 3px;
    &:active {
        opacity: 0.8;
    }
}
.sure {
    background-color: #1a36a9;
    color: #fff;
}
.cancel {
    background-color: #d2d2d2;
    margin-right: 40px;
}
</style>
<style>
.radio-li span {
    font-size: 12px !important;
    color: #606266;
}
.re-dialog .el-form-item {
    margin-bottom: 19px !important;
}
.re-dialog .el-dialog__body {
    padding-bottom: 0 !important;
}
.re-dialog .el-dialog__footer {
    border-top: 1px solid #eee;
    padding: 20px !important ;
}
.re-dialog .el-input__inner {
    height: 34px !important;
    line-height: 34px !important;
}
.el-form-item__content,
.el-form-item__label {
    line-height: 34px;
}
</style>

